<template>
	<view class="address_content">
		<!-- 占位栏 -->
		<!-- <view class="w-100" :style="{marginTop:topbar+'px'}"></view> -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <u-navbar :autoBack="true" title="收货地址"></u-navbar> -->
		<!-- #endif -->  
		<!-- #ifdef MP-ALIPAY -->  
		<!-- #endif -->
		<view class="address_list" >
			<view class="list" v-for="(item, index) in addressList" :key="index">
				<view class="list_top flex">
					<view class="list_left">
						<radio-group @change="groupChange">
							<radio :checked="item.tolerant == '1'" :value="item.id" color="#FF4D60" />
						</radio-group>
					</view>
					<view class="list_right">
						<view class="right-header">
							<text>{{item.name}}</text>
							<text>{{phone(item.phone)}}</text>
						</view>
						<view class="right-footer">
							{{item.province}}  {{item.city}} {{item.district}} {{item.address}}
						</view>
					</view>
				</view>
				<view class="list_bottom flex">
					<view class="flex" @tap="editAddress(item.id)">
						<text class="iconfont addressChanges" ></text>
						编辑
					</view>
					<view class="flex" @tap="delet(item)">
						<text class="iconfont dele"></text>
						删除
					</view>
				</view>
			</view>
			<view class="add-btn" @click="addAddress">新增收货地址</view>
		</view>
		<!-- 删除询问框 -->
		<u-modal :show="show" @confirm="yesDelet" ref="uModal" :asyncClose="true" :showCancelButton="true" title="是否确认删除" @cancel="show = false" confirmColor="#FD2C4C"></u-modal>
	</view>
</template>

<script>
	import { getAddress,deletAddress,setMoRen} from '@/common/http/api.js'
	export default {
		data() {
			return {
				topbar:50,
				addressList: [],
				pageSize: 5,
				pageNum: 1,
				show: false,
				id: ''
			}
		},
		computed: {
			userInfo() {
				return uni.getStorageSync("userInfo") ? uni.getStorageSync("userInfo") : {}
			},
			phone(){
				return (phoneNumber)=>{
					return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
				}
			}
		},
		onShow(){
			this.getAddressList();
		},
		onLoad(option){
			this.topbar=getApp().globalData.customBar;
		},
		methods: {
			// 确认删除
			yesDelet(){
				deletAddress(this.id).then(res => {
					this.$ut.msg('删除成功');
					this.getAddressList();
					this.show = false;
				})
			},
			// 删除地址
			delet(item){
				this.show = true;
				this.id = item.id;
			},
			// 选择地址
			groupChange(n) {
				setMoRen({id:n.detail.value}).then(res => {
					this.getAddressList()
					this.$ut.msg('设置成功');
				})
				// for(let i = 0;i<this.addressList.length;i++){
				// 	if(this.addressList[i].id == n.detail.value){
				// 		this.addressList[i].tolerant = '1'
				// 	}else{
				// 		this.addressList[i].tolerant = '0'
				// 	}
				// }
			},
			// 获取地址列表
			getAddressList(){
				getAddress({pageSize:this.pageSize,pageNum:this.pageNum}).then(res => {
					this.addressList = res.data.rows
				})
			},
			// 新增地址
			addAddress(){ uni.$u.route({url: 'pages_Me/address/addressManage?type=0'}) },
			// 编辑地址
			editAddress(id){uni.$u.route({url: `pages_Me/address/addressManage?type=1&id=${id}`})}
		}
	}
</script>

<style lang='scss' scoped>
	.address_content{
		padding: 20rpx;
		
		.address_list{
			
			.list{
				padding: 20rpx;
				background: #fff;
				position: relative;
				margin-bottom: 19rpx;
				border-radius: 11rpx;
				
				.list_top{
					border-bottom: 2rpx solid #F6F6F6;
					padding-bottom: 20rpx;
					justify-content: flex-start;
					
					.list_left{
						margin-right: 20rpx;
					}
					
					.list_right{
						.right-header{
							margin-bottom: 12rpx;
							font-size: 25rpx;
							
							text:nth-child(1){
								margin-right: 18rpx;
							}
						}
						
						.right-footer{
							color: #666;
							font-size: 29rpx;
							line-height: 1.5;
						}
					}
				}
				
				.list_bottom{
					padding-top: 20rpx;
					justify-content: flex-end;
					color: #666;
					font-size: 24rpx;
					
					view{
						margin-left: 24rpx;
						
						
						text{
							margin-right: 4rpx;
						}
					}
				}
			}
		}
	}
	
	
	
	.add-btn{
		width: 75%;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background: #FF4D60;
		border-radius: 44rpx;	
		margin-left: 50%;
		transform: translateX(-50%);
		margin-top: 50rpx;
	}
</style>
